import React, {lazy } from 'react'

// Navigate重定向组件
import { Navigate } from "react-router-dom"


import Home from "../views/Home"
// import About from  "../views/About"
// import User from  "../views/User"
import Login from  "../views/Login"

// const About = lazy(() => import('../views/About'))
// const User = lazy(() => import('../views/User'))


const Page1 = lazy(() => import("../views/Page1"))
const Page2 = lazy(() => import("../views/Page2"))
const UserTom = lazy(() => import("../views/UserTom"))

// 抽取成一个函数
const withLoadingComponent = (comp: JSX.Element) => (
  <React.Suspense fallback={<div>Loading</div>}>
    {comp}
  </React.Suspense>
)


const routes = [
  {
    path: "/",
    element: <Navigate to="/page1" />
  },
  {
    path:"/",
    element: <Home />,
    children:[
      {
        path:"/page1",
        element: withLoadingComponent(<Page1 />)
      },
      {
        path:"/page2",
        element: withLoadingComponent(<Page2 />)
      },
      {
        path:"/userTom",
        element: withLoadingComponent(<UserTom />)
      },
    ]
  },
  {
    path:"/login",
    element: <Login />
  },
  {
    path: '*',  // 输入的是路由表里没有的重定向到page1
    element:<Navigate to="/page1" />
  }

  // {
  //   path: "/home",
  //   element: <Home />
  // },
  // {
  //   path: "/about",
  //   // 懒加载
  //   element: withLoadingComponent(<About />)

  // },
  // {
  //   path: "/user",
  //   element: withLoadingComponent(<User />)
  // }
]

export default routes